<template>
  <div id="app" onselectstart="return false;" unselectable="on">
    <div class="floatball" id="floatball" 
      @click="startRecording()"
      @mousedown="down" @touchstart.stop="down"
      @mousemove="move" @touchmove.stop="move"
      @mouseup="end" @touchend.stop="end"
      :style="{top:position.y+'px', left:position.x+'px',position:'fixed'}">
      <svg  style="pointer-events: none; margin-top:19%;margin-left:19%"  t="1588439192079" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2474" width="32" height="32"><path d="M486.4 972.8v-128.9728A332.8 332.8 0 0 1 179.2 512a25.6 25.6 0 0 1 51.2 0 281.6 281.6 0 0 0 563.2 0 25.6 25.6 0 1 1 51.2 0 332.8 332.8 0 0 1-307.2 331.8272V972.8h153.6a25.6 25.6 0 1 1 0 51.2h-358.4a25.6 25.6 0 1 1 0-51.2h153.6zM512 51.2a153.6 153.6 0 0 0-153.6 153.6v307.2a153.6 153.6 0 0 0 307.2 0V204.8a153.6 153.6 0 0 0-153.6-153.6z m0-51.2a204.8 204.8 0 0 1 204.8 204.8v307.2a204.8 204.8 0 1 1-409.6 0V204.8a204.8 204.8 0 0 1 204.8-204.8z" fill="#e6e6e6" p-id="2475"></path></svg> 
    </div>
      <el-dialog
        title="请讲"
        :visible.sync="centerDialogVisible"
        width="20%"
        :lock-scroll="false"
        center>
        <img style="margin-left:-20%" @click="stopRecording()" src="http://img.ui.cn/data/file/7/9/6/2088697.gif?imageMogr2/auto-orient/strip" height="280px" width="500px" alt="">  
      </el-dialog>    
    <router-view></router-view>
  </div>
</template>

<script>
var dx,dy
var screenWidth = window.screen.width
var screenHeight = window.screen.height
// 登录
import Login from "./components/login/login";
//首页
import Slidershow from "./components/user/buyer/index/slidershow";
import Items from "./components/user/buyer/index/item";
import Section from "./components/user/buyer/index/section";
import Recommend from "./components/user/buyer/index/recommend";
//列表
import List from "./components/user/buyer/list/list";
//购买
import Detail from "./components//user/buyer/detail/detail";
import {recorder} from "./util/recorder"
export default {
  name: "App",
  data() {
    return {
      centerDialogVisible:false,
      flags: false,
      recorder:null,
      isRecording :false,
      blob : null,
      audioContext:null,
      icon: require("../src/assets/img/icon.png"),
      position: {
        x: 1800,
        y: 800
      },
    }
  },
  methods: {
    startRecording() {
      this.centerDialogVisible = true
      recorder(window),
      HZRecorder.get((rec)=>{
        this.recorder = rec;
        this.recorder.start();
      })
    },
    stopRecording() {
      var audio = document.querySelector('audio');
      this.recorder.stop()
      let param = new FormData(); //创建form对象
      param.append('blob',this.recorder.getBlob());//通过append向form对象添加数据
      this.axios.post("/speech/recognition",param).then((resp)=>{
        if(resp.data.result.match("我的订单")){
            this.$router.push("/personal/order")
        }
        if(resp.data.result.match("个人信息")){
            this.$router.push("/personal")
        }
        if(resp.data.result.match("消息")){
            this.$router.push("/newmessage")
        }
        if(resp.data.result.match("购物车")){
            this.$router.push("/shopping")
        }
        // this.$router.push({ path: this.redirect || '/user/info' })
      })
      // this.recorder.upload("http://weim1.f3322.net:8080/api/speech/recognition",(resp)=>{
      //   console.log(resp)
      // })
      this.centerDialogVisible= false
    },
    // 实现移动端拖拽
    down(event){
      this.flags = true;
      var touch ;
      if(event.touches){
          touch = event.touches[0];
      }else {
          touch = event;
      }
      dx = touch.clientX - event.target.offsetLeft
      dy = touch.clientY - event.target.offsetTop
    },
    move() {
      if (this.flags) {
        var touch ;
        if (event.touches) {
          touch = event.touches[0];
        } else {
          touch = event;
        }
        // 定位滑块的位置
        this.position.x = touch.clientX - dx;
        this.position.y = touch.clientY - dy;
        // 限制滑块超出页面
        // console.log('屏幕大小', screenWidth, screenHeight )
        if (this.position.x < 0) {
          this.position.x = 0
        } else if (this.position.x > screenWidth - touch.target.clientWidth) {
          this.position.x = screenWidth - touch.target.clientWidth
        }
        if (this.position.y < 0) {
          this.position.y = 0
        } else if (this.position.y > screenHeight - touch.target.clientHeight) {
          this.position.y = screenHeight - touch.target.clientHeight
        }
        //阻止页面的滑动默认事件
        document.addEventListener("touchmove",function(){
            event.preventDefault();
        },false);
      }
    },
    //鼠标释放时候的函数
    end(){
      this.flags = false;
    },
   }
};
</script>

<style>
.floatball{
  color:white;
  height:50px;
  width: 50px;
  padding: 5px;
  z-index: 990;
  position: fixed;
  top: 60px;
  right: 320px;
  box-shadow: 3px 3px 3px #888888;
  border-radius: 50%;
  /* background-image: url("../src/assets/img/icon.png"); */
  background-color: rgba(29, 157, 237,0.8);
  background-size: contain
}
.floatball:hover {background-color: rgba(29, 157, 237, 0.897);	}
html {
  overflow-y: scroll;
}
* {
  margin: 0;
  padding: 0;
  font-size: 14px;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}
a {
  /* display: block; */
  outline: none;
  text-decoration: none;
  color: #222;
}
body {
  -moz-user-select: none;
  -webkit-user-select:none;
  -khtml-user-select: none;
  user-select: none;
  background-color: #fff;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
li,
ol,
ul {
  list-style: none;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font: inherit;
}
.tc {
  text-align: center;
}
.f13 {
  font-size: 14px;
}
.f14 {
  font-size: 14px;
}
.f16 {
  font-size: 16px;
}
.f18 {
  font-size: 18px;
}
.f21 {
  font-size: 21px;
}
.f24 {
  font-size: 24px;
}

.mt4 {
  margin-top: 4px;
}
.mt8 {
  margin-top: 8px;
}
.mt15 {
  margin-top: 15px;
}
.mt24 {
  margin-top: 24px;
}
.mt26 {
  margin-top: 26px;
}
.mt34 {
  margin-top: 34px;
}
.mt36 {
  margin-top: 36px;
}
.mt157 {
  margin-top: 157px;
}
.mr24 {
  margin-right: 24px;
}
.mr42 {
  margin-right: 42px;
}
.mb13 {
  margin-bottom: 13px;
}
.mb24 {
  margin-bottom: 24px;
}
.mb36 {
  margin-bottom: 36px;
}
.ml24 {
  margin-left: 24px;
}
.ml30 {
  margin-left: 30px;
}
.ml42 {
  margin-left: 42px;
}
.ml60 {
  margin-left: 60px;
}

.pt12 {
  padding-top: 12px;
}
.pt20 {
  padding-top: 20px;
}
.pt36 {
  padding-top: 36px;
}
.pt157 {
  padding-top: 157px;
}
.pr12 {
  padding-right: 12px;
}
.pr48 {
  padding-right: 48px;
}
.pl12 {
  padding-left: 12px;
}
.pl24 {
  padding-left: 24px;
}
.pl36 {
  padding-left: 36px;
}
.pl48 {
  padding-left: 48px;
}
.pb5 {
  padding-bottom: 5px;
}
.pb24 {
  padding-bottom: 24px;
}
.ptb24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.ptb36 {
  padding-top: 36px;
  padding-bottom: 36px;
}
.plr24 {
  padding-left: 24px;
  padding-right: 24px;
}
.plr36 {
  padding-left: 36px;
  padding-right: 36px;
}

.w150 {
  width: 150px;
}
.w320 {
  width: 320px;
}
.w450 {
  width: 450px;
}

.overflow {
  overflow: hidden;
}
.hidden {
  position: relative;
  overflow: hidden;
}
.color-c3 {
  color: #c3c3c3;
}
.color-888 {
  color: #888;
}
.tc {
  text-align: center;
}
.tl {
  text-align: left;
}

.circle {
  overflow: hidden;
  border-radius: 50%;
  vertical-align: top;
}

.el-tabs__item.is-active {
  color: #29a3d6;
}
.el-button--primary {
  background-color: #29a3d6;
  border-color: #29a3d6;
}
.el-button--primary:hover {
  background-color: #0076a4;
  border-color: #0076a4;
}
</style>
